import React, { useEffect, useState } from 'react';
import { Space, Table, Tag, Button,Popconfirm ,Pagination, message} from 'antd';
import type{PaginationProps}from'antd';
import type { ColumnsType } from 'antd/es/table';
import { newList,newDel } from '../../api/school';
import './schoolList.scss'
import { useNavigate } from 'react-router-dom';
interface DataType {
    page?: number,
    pageSize?: number
    key?: React.Key;
    title?: string;
    author?: string;
    keywords?: string;
    v_id?:number
}
var total=0
const showTotal:PaginationProps['showTotal']=total=>`共有${total}条数据`
const SchoolList: React.FC = () => {
    const columns: ColumnsType<DataType> = [
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '关键词',
            dataIndex: 'keywords',
        },
        {
            title: '操作',
            // dataIndex: 'logid',
            width: 5,
            render: (text: any, record: any):any => (
                <Space size="middle">
                    <Button type="primary" style={{ background: '#13ce66' }} onClick={upd(record)}>修改</Button>
                    <Popconfirm
                            title="是否确认删除?"
                            onConfirm={del(text)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="primary" danger>删除</Button>
                        </Popconfirm>
                    <Button type="primary" style={{ width: '96px', background: '#909399' }} onClick={getDetail(text.news_id)}> 详情</Button>
                </Space>
            ),
        },
    ];
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    
      const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
      };
    const hasSelected = selectedRowKeys.length > 0;
    const [params, setParams]: any = useState<DataType>({ page: 1, pageSize: 8,title:'', author:'',keywords:''})
    // 分页
    const changePage=(page:number,pageSize:number)=>{
        setParams({...params,page,pageSize})
    }
    const [curpage,setcurpage]:any=useState()
    const [schoolInfo, setSchoolInfo]: any = useState([])
    //   获得数据
    const getSchoolList = async () => {
        let res: any = await newList(params)
        // console.log(res);
        if (res.code === '00000') {
            setSchoolInfo(res.data)
            total=res.total
            setcurpage(res.current_page)
        }
    }
    // 查询输入框
    const [idortitle,setidortitle]:any=useState()
    const getidortitle=(value:any)=>{
        setidortitle({
            ...idortitle,idortitle:value.target.value
        })
    }
    // 查询
    const Seach=()=>{
        setParams({
            ...params,
            idortitle:idortitle.idortitle
        })
    }
    // 点击删除
    const del=(text:any):any=>{
        return()=>{
            getnewDel({news_id:text})
        }
    }
    // 删除
    const getnewDel=async(id:any)=>{
        let res:any=await newDel(id)
        // console.log(res);
        if(res.code==='00000'){
            message.success('删除成功')
            getSchoolList()
        }else{
            message.error(res.msg)
        }
    }
    // 批删
    const dels=()=>{
        getnewDel({news_id:selectedRowKeys})
    }
    const navigate=useNavigate()
    // 添加跳转
    const toAdd=()=>{
        navigate('/index/SchoolAdd')
    }
    // 跳转详情
    const getDetail=(id:any)=>{
        return()=>{
            navigate('/index/SchoolDetail?id='+id)
        }
    }
    // 修改
    const upd=(record:any)=>{
        // console.log(record);
       return()=>{
        navigate('/index/SchoolAdd',{state:record})
       }
        
    }
    useEffect(() => {
        getSchoolList()
    },[params])
    return (<div className='schoolbox'>
        {/* 校园动态列表 */}
        <div className="top">
            <input type="text" placeholder='请输入查询内容' value={schoolInfo.idortitle} onChange={getidortitle}/>
            <Button type="primary" onClick={Seach}>查询</Button>
            <Button type="primary" style={{ background: '#13ce66',textAlign:'center' }} onClick={toAdd}>添加</Button>
            <Popconfirm
                    title="是否确认删除?"
                    onConfirm={dels}
                    okText="Yes"
                    cancelText="No"
                    disabled={selectedRowKeys.length === 0}
                >
                    <Button type="primary" danger disabled={selectedRowKeys.length === 0} >
                        批量删除
                    </Button>
                </Popconfirm>
        </div>
        <div className="tbody">
            <Table rowKey='news_id'  columns={columns} dataSource={schoolInfo} rowSelection={rowSelection} bordered pagination={false} />
            <div className='page'>
            <Pagination current={curpage} total={total} showTotal={showTotal} showQuickJumper defaultPageSize={5} pageSizeOptions={['5', '10', '15', '20']} defaultCurrent={1} onChange={changePage} />
 
            </div>
        </div>
    </div>)
}
export default SchoolList